<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>文件下载器</title>
</head>
<body>
  <script type="text/javascript">
    const logProgress = async (res) => {
      const total = res.headers.get('content-length')
      let loaded = 0
      const [stream1, stream2] = res.body.tee()
      const reader = stream1.getReader()
      while (true) {
        const { value, done } = await reader.read()
        if (done) {
          console.log('下载完成')
          return new Response(stream2, { headers: res.headers })     
        }
        loaded += value.length
        console.log(`Downloaded ${loaded} of ${total} (${(loaded / total * 100).toFixed(2)}%)`)
      } 
    }
    const readerDownload = async () => {
      const res = await fetch('./test.json')
      const logResult = await logProgress(res)
      const jsonData = await logResult.json()
      console.log('readerDownload json--->', jsonData)
    }
    readerDownload()
  </script>
</body>
</html>